<template>
	<view class="user">
		<view class="imgTitle"><image src="../../static/image/user/use_title.png"></image></view>

		<view class="bannerInfo">
			<view class="helloWrapper" @click="toUserInfo(userInfo)">
				<text class="helloText">你好·{{ userInfo.name }}</text>
			</view>
			<text class="miaoshu">江门起源，灵感寻味</text>

			<view class="infoWrapper">
				<view class="titleText">
					<text class="VIP">GO会员</text>
					<view class="vipW"><text class="VipText">成为星球会员享双倍积分</text></view>
				</view>
				<view class="LV">
					<text class="LvText">Lv{{ userInfo.LV }}</text>
				</view>

				<view class="lineC"></view>

				<view class="imgList">
					<view class="intShop">
						<image src="../../static/image/user/user_03.jpg"></image>
						<view class="shopIntW">
							<text class="shopInt">{{ userInfo.intUseNum }}</text>
						</view>
						<view class="shopTextW"><text class="shopText">积分商城</text></view>
					</view>

					<view class="intShop">
						<image src="../../static/image/user/user_05.jpg"></image>
						<view class="shopIntW">
							<text class="shopInt">{{ userInfo.xiCha }}</text>
						</view>
						<view class="shopTextW"><text class="shopText">喜茶券</text></view>
					</view>

					<view class="intShop">
						<image src="../../static/image/user/user_07.jpg"></image>
						<view class="shopIntW">
							<text class="shopInt">{{ userInfo.intUseNum }}</text>
						</view>
						<view class="shopTextW"><text class="shopText">积分商城</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserInfo, getUserTokenInfo } from '@/api/user.js';
export default {
	name: 'user',
	data() {
		return {
			userInfo: ''
		};
	},
	onLoad() {
		if(this.$store.state.hasLogin) {
			this.getData()
		} else {
			uni.showToast({
				title: "登录失效，请重新登录",
				duration: 1000
			});
			setTimeout(()=> {
				uni.navigateTo({
					url:'../login/login'
				})
			}, 1000)
		}
		
	},
	methods: {
		async getData() { //获取数据
			let useToken = uni.getStorageSync("token")
			this.userInfo = await getUserTokenInfo(useToken.token).then(res => {
				return res.data.data.data
			})
			console.log(this.userInfo, "this.userInfo");
		},
		toUserInfo(userInfo) {
			uni.redirectTo ({
				url:'./userInfo/userInfo?userInfo=' + encodeURIComponent(JSON.stringify(userInfo))
			})
		}
	}
};
</script>

<style scoped>
.bannerInfo {
	padding: 30rpx;
	height: 100vh;
	background-color: #f6f6f6;
}
.imgTitle image {
	width: 100%;
	height: 550rpx;
}
.infoWrapper {
	margin-top: 20rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 17rpx;
	position: relative;
}
.helloWrapper {
	margin-bottom: 10rpx;
}
.imgList {
	display: flex;
	justify-content: space-between;
	margin-top: 100rpx;
}
.imgList image {
	width: 90rpx;
	height: 65rpx;
}
.helloText,
.miaoshu {
	color: #dba871;
}
.lineC {
	height: 1px;
	width: calc(100% - 60rpx);
	background-color: #f6f6f6;
	position: absolute;
	bottom: 225rpx;
}
.helloText {
	font-weight: bold;
	font-size: 35rpx;
}
.miaoshu {
	font-size: 20rpx;
}
.VIP {
	color: #333333;
	font-size: 37rpx;
	font-weight: bold;
}
.vipW {
	display: inline-block;
	background-color: #f2f2f2;
	color: #b4b4b4;
	text-align: center;
	border-radius: 25rpx;
	padding: 0rpx 12rpx 5rpx 12rpx;
	margin-left: 20rpx;
}
.VipText {
	font-size: 16rpx;
}
.LV {
	display: inline;
}
.LvText {
	font-size: 25rpx;
	border: 1px solid #c3c3c3;
	padding: 2rpx 30rpx 2rpx 30rpx;
}
.intShop {
	text-align: center;
}
.shopInt,
.shopText {
	color: #777777;
}
.shopInt {
	font-size: 35rpx;
	font-weight: bold;
}
</style>
